/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable no-unused-vars */
import React, {useContext,useEffect,useState} from "react";
const UserContext = React.createContext();
const {Provider, Consumer} = UserContext;

function Context() {
        const [name, setName] = useState('wuzi');

    useEffect(() => {
        setTimeout(() => setName('wuzii'),1000);
    },[]);

    const logout = () => {
        setName('');
    };

  return (
  <Provider value={{ name, logout }}>
      {/* <Consumer>{value => <a>{value.name}</a>}</Consumer> */}
  <Children />
  </Provider>
  );
}

function Children() {
    const {name, logout} = useContext(UserContext);
    return (
        <>
        <h3>Children</h3>
        <a>{name}</a>
        <button onClick={logout}>注销</button>
        {/* <Consumer>{value => <a>{value.name}</a>}</Consumer> */}
        </>
    )
}
export default Context;
